import React, { useState, useEffect } from 'react'
import { Card, Button, Spin, message } from 'antd'
import { useParams, useNavigate } from 'react-router-dom'
import { PrinterOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { getProductDetail } from '@/api/product'

// 定义产品接口
interface ProductType {
  id: number
  teamId: number
  categoryId: number
  productTypeId: number
  productName: string
  sku: string
  specification: string
  purchasePrice: number
  sellingPrice: number
  stockAlert: number
  weight: number
  brand: string
  model: string
  englishName: string
  customsCode: string
  declaredPrice: number
  length: number
  width: number
  height: number
  status: number
  notes: string
  photo: string
}

// 定义API响应接口
interface ApiResult<T> {
  code: number
  message: string
  data: T
  isSuc: boolean
}

const ProductLabel: React.FC = () => {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const [loading, setLoading] = useState<boolean>(false)
  const [product, setProduct] = useState<ProductType | null>(null)

  // 获取产品详情
  const fetchProductDetail = async () => {
    if (!id) return
    
    setLoading(true)
    try {
      const res = await getProductDetail(parseInt(id)) as ApiResult<ProductType>
      
      if (res.isSuc && res.data) {
        setProduct(res.data)
      } else {
        message.error(res.message || '获取产品详情失败')
      }
    } catch (error) {
      console.error('获取产品详情失败:', error)
      message.error('获取产品详情失败')
    } finally {
      setLoading(false)
    }
  }

  // 处理返回按钮点击
  const handleBack = () => {
    navigate('/product')
  }

  // 处理打印按钮点击
  const handlePrint = () => {
    window.print()
  }

  useEffect(() => {
    fetchProductDetail()
  }, [id])

  return (
    <Card 
      title="产品标签打印"
      extra={
        <div>
          <Button 
            type="primary" 
            icon={<ArrowLeftOutlined />} 
            onClick={handleBack}
            style={{ marginRight: 16 }}
          >
            返回
          </Button>
          <Button 
            type="primary" 
            icon={<PrinterOutlined />} 
            onClick={handlePrint}
          >
            打印
          </Button>
        </div>
      }
    >
      <Spin spinning={loading}>
        {product ? (
          <div className="product-label" id="printArea">
            <div className="label-container" style={{ 
              width: '300px', 
              border: '1px solid #ddd', 
              padding: '20px', 
              margin: '0 auto',
              fontFamily: 'Arial, sans-serif'
            }}>
              {product.photo && (
                <div style={{ textAlign: 'center', marginBottom: '15px' }}>
                  <img 
                    src={`http://localhost:23892${product.photo}`} 
                    alt={product.productName} 
                    style={{ maxWidth: '100%', maxHeight: '150px' }}
                  />
                </div>
              )}
              
              <div style={{ marginBottom: '10px' }}>
                <h2 style={{ margin: '0', fontSize: '18px' }}>{product.productName}</h2>
                {product.englishName && (
                  <p style={{ margin: '5px 0', fontSize: '14px' }}>{product.englishName}</p>
                )}
              </div>
              
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
                <span style={{ fontWeight: 'bold' }}>SKU:</span>
                <span>{product.sku}</span>
              </div>
              
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
                <span style={{ fontWeight: 'bold' }}>规格:</span>
                <span>{product.specification}</span>
              </div>
              
              {product.brand && (
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
                  <span style={{ fontWeight: 'bold' }}>品牌:</span>
                  <span>{product.brand}</span>
                </div>
              )}
              
              {product.model && (
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
                  <span style={{ fontWeight: 'bold' }}>型号:</span>
                  <span>{product.model}</span>
                </div>
              )}
              
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
                <span style={{ fontWeight: 'bold' }}>价格:</span>
                <span style={{ fontWeight: 'bold', fontSize: '16px', color: '#f50' }}>
                  ¥{(product.sellingPrice / 100).toFixed(2)}
                </span>
              </div>
              
              {/* 条形码区域 - 实际项目中可以使用条形码生成库 */}
              <div style={{ textAlign: 'center', marginTop: '15px' }}>
                <div style={{ 
                  background: 'repeating-linear-gradient(90deg, #000, #000 2px, #fff 2px, #fff 4px)', 
                  height: '40px', 
                  width: '80%', 
                  margin: '0 auto' 
                }}></div>
                <div style={{ marginTop: '5px', fontSize: '12px' }}>{product.sku}</div>
              </div>
            </div>
          </div>
        ) : !loading && (
          <div style={{ textAlign: 'center', padding: '30px' }}>
            未找到产品信息
          </div>
        )}
      </Spin>
    </Card>
  )
}

export default ProductLabel